<template>
	<div>
		<el-row style="width: 80%; position: relative; top: 60px; margin: 0 auto">
			<!-- 搜索区域 -->
			<el-col :span="24">
				<el-form :inline="true" style="display: flex; justify-content: center">
					<el-form-item label-width="5px">
						<el-input v-model="name" placeholder="输入地图名称" clearable @clear="load" />
					</el-form-item>
					<el-form-item label-width="5px">
						<el-button type="primary" :icon="Search" @click="load"> 查询 </el-button>
					</el-form-item>
				</el-form>
			</el-col>

			<!-- 卡片展示区域 -->
			<el-col :span="24">
				<div class="card-container">
					<el-row :gutter="20">
						<el-col v-for="item in tableData" :key="item.id" :span="8">
							<el-card class="card-item" shadow="hover" @click="handleDetail(item.id)">
								<el-image style="width: 100%; height: 200px; border-radius: 5px" :src="item.img" fit="contain" :preview-src-list="[item.img]" />
								<div class="card-content">
									<h3 class="card-title">
										{{ item.name }}
									</h3>
									<div class="card-category">
										{{ getCategoryName(item.belong) || '未关联回目' }}
									</div>
								</div>
							</el-card>
						</el-col>
					</el-row>
				</div>

				<!-- 分页 -->
				<el-col>
					<div class="pagination">
						<el-pagination
							:current-page="pageNum"
							:page-size="pageSize"
							:page-sizes="[10, 20, 30, 50, 100, 500, 1000]"
							size="small"
							layout="total, sizes, prev, pager, next, jumper"
							:total="Number(total)"
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
						/>
					</div>
				</el-col>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import request from '@/utils/request'
import router from '@/router'

const pageNum = ref(1)
const pageSize = ref(6)
const total = ref(0)
const tableData = ref([])
const name = ref('')
const categoryList = ref([])

// 加载数据
const load = async () => {
	const res = await request.get('/map/page', {
		params: {
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			name: name.value
		}
	})
	tableData.value = res.data.records
	total.value = res.data.total
}

const loadCategories = async () => {
	try {
		const res = await request.get('/category')
		categoryList.value = res.data
	} catch (error) {
		console.error('获取回目列表失败:', error)
	}
}

const getCategoryName = belongId => {
	const category = categoryList.value.find(item => item.id === belongId)
	return category ? category.name : null
}

// 初始化加载
load()

// 查看详情
const handleDetail = id => {
	router.push(`/front/map/comment?id=${id}`)
}

// 重置搜索
const handleReset = () => {
	name.value = ''
	load()
}

// 分页处理
const handleSizeChange = size => {
	pageSize.value = size
	load()
}

const handleCurrentChange = current => {
	pageNum.value = current
	load()
}

onMounted(() => {
	loadCategories()
})
</script>

<style scoped>
.card-container {
	padding: 20px;
}

.card-item {
	margin-bottom: 20px;
	transition: transform 0.3s ease;
	cursor: pointer;
	position: relative;
}

.card-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-content {
	padding: 15px;
	text-align: center;
}

.card-title {
	font-size: 16px;
	margin: 10px 0;
	color: #333;
	font-weight: bold;
}

.card-category {
	font-size: 14px;
	color: #666;
	margin-top: 8px;
}

.card-actions {
	margin-top: 15px;
}

.pagination {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	background: rgba(255, 255, 255, 0.9);
	padding: 8px 20px;
	border-radius: 24px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	display: inline-flex;

	:deep(.el-pagination__total),
	:deep(.el-pagination__jump),
	:deep(.el-pagination__sizes),
	:deep(.btn-prev),
	:deep(.btn-next) {
		color: #333;
	}

	:deep(.el-pager li) {
		color: #333;

		&.is-active {
			color: #409eff;
		}
	}
}

.card-item:active {
	transform: scale(0.98);
}
</style>
